<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/font-family.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/travel-note.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/comment.js"></script>
    <title>Travel Sharer</title>
</head>
<body>
    <!-- 导航 start -->
    <div class="nav-top">
        <div class="nav-login">
            <div class="nav-head">
                <a href="login.html">
                    <img class="login-img" src="img/head.png" alt="">
                    <span>Log In/ Sign Up</span>
                </a>
            </div>
            <div class="nav-link">
                <a href="https://www.facebook.com/">
                    <img src="img/fb.png" alt="">
                </a>
                <a href="https://www.instagram.com/">
                    <img src="img/ins.png" alt="">
                </a>
            </div>
        </div>
        <nav class="nav-list">
            <ul class="nav-detail">
                <li><a href="index.html" ></a>Hmoe</a></li>
                <li><a href="travelNote.html" class="nav-action">Travel Note</a></li>
                <li><a href="findTraveller.html">Find Traveller</a></li>
                <li><a href="discover.html">Discover</a></li>
                <li><a href="myPost.html">My Post</a></li>
                <li><a href="members.html">Members</a></li>
                <li><a href="myCollection.html">My Collection</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
            <div class="nav-search">
                <img src="img/search.png" alt="">
                <input type="text" placeholder="Search Site">
            </div>
        </nav>
    </div>
    <!-- 导航 end -->
    
    <!-- 中部 start -->
    <div class="center-box">
        <div class="note-box">
            <ul class="note-title">
                <li class="note-title-li title-action">All Posts</li>
                <li class="note-title-li">Eat</li>      
                <li class="note-title-li">Travel</li>
                <li class="note-title-li">Relax</li>
            </ul>

            <div class="note-content">
                <div class="note-block">
                    <article class="detail-article">
                        <div class="detail-article-content">
                            <div class="detail-user-info">
                                <span><a href="" class="user-name-a"><span>wl19950318</span></a>  ·  Jun 30  ·  1 min read </span>
                                <img class="detail-more-img" src="img/noteMore.png" alt="">
                            </div>
                            <div class="share-block detail-article-share">
                                <img src="img/share.png" alt="">
                                <span>Share Post</span>
                            </div>
                            <div class="note-content-title detail-article-title">
                                Finland Snow View
                            </div>
                            <div class="detail-update">
                                Updated: Jul 7
                            </div>
                            <div class="detail-page-content">
                                XXXXXXXXXXXXXXXXXXXXXXXX
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

                                <img src="img/bottomImg.png" alt="">
                                <div class="page-subtitle">
                                    XXXXXXXXXXXXXXXXXXXXXXXX
                                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
                                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
                                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                                </div>
                                XXXXXXXXXXXXXXXXXXXXXXXX
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                                <div class="page-paragraph">
                                    Create Relevant Content
                                </div>
                                XXXXXXXXXXXXXXXXXXXXXXXX
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
                                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
                                <div class="page-content-share">
                                    <a href="#"><img src="img/facebook.png" alt=""></a>
                                    <a href="#"><img src="img/twitter.png" alt=""></a>
                                    <a href="#"><img src="img/google.png" alt=""></a>
                                    <a href="#"><img src="img/link.png" alt=""></a>
                                    <a href="travelNote.html"><span class="share-relax">Relax</span></a>
                                </div>
                                <div class="page-content-view">
                                    <span>29 views</span>
                                    <span class="click-like">1 <img src="img/like.png" alt=""></span>
                                </div>
                            </div>
                        </div>
                        <div class="content-comment">
                           <div class="input-comment">
                               <textarea name="" id="" placeholder="用心的回复会被更多人看到和认可噢"></textarea>
                               <div class="submit-comment">
                                   <button class="cancel-submit">取消</button>
                                   <button class="confirm-submit">发布</button>
                               </div>
                           </div>
                           <div class="comment-list">
                                <div>5条评论</div>
                                <div class="comment-list-box">
                                    <div class="comment-block">
                                        <img src="img/twitter.png" class="comment-img">
                                        <div class="comment-content">
                                            <p class="comment-name">名字</p>
                                            <p class="comment-date">2楼 20180818</p>
                                            <p class="comment-detail">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                                        </div>
                                    </div>

                                    <div class="comment-block">
                                            <img src="img/facebook.png" class="comment-img">
                                            <div class="comment-content">
                                                <p class="comment-name">名字</p>
                                                <p class="comment-date">2楼 20180818</p>
                                                <p class="comment-detail">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="recent-posts">
                        <div class="recent-posts-title">
                            <span>Recent Posts</span>
                            <a href="travelNote.html"><span class="see-all-posts">See All</span></a>
                        </div>
                        <div class="recent-posts-box">
                            <div class="post-detail">
                                <div class="post-detail-box">
                                    <img src="img/detail2.png" alt="">
                                    <div class="post-content">
                                        <div class="post-content-title">Sahara Adventure</div>
                                        <div class="post-content-view">
                                            <span class="post-content-view-left">
                                                <img src="img/eye.png" alt=""> 4 
                                                <a href="detailPage.html">Write a comment</a>
                                            </span>
                                            <span class="click-like">1 <img src="img/like.png" alt=""></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="post-detail">
                                <div class="post-detail-box">
                                    <img src="img/detail2.png" alt="">
                                    <div class="post-content">
                                        <div class="post-content-title">Sahara Adventure</div>
                                        <div class="post-content-view">
                                            <span class="post-content-view-left">
                                                <img src="img/eye.png" alt=""> 4 
                                                <a href="detailPage.html">Write a comment</a>
                                            </span>
                                            <span class="click-like">1 <img src="img/like.png" alt=""></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="post-detail">
                                <div class="post-detail-box">
                                    <img src="img/detail2.png" alt="">
                                    <div class="post-content">
                                        <div class="post-content-title">Sahara Adventure</div>
                                        <div class="post-content-view">
                                            <span class="post-content-view-left">
                                                <img src="img/eye.png" alt=""> 4 
                                                <a href="detailPage.html">Write a comment</a>
                                            </span>
                                            <span class="click-like">1 <img src="img/like.png" alt=""></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </article>
                    <article class="detail-article leave-login">
                        <div class="detail-article-content leave-login-box">
                            <a href="login.html"><span>Log in</span> to leave a comment!</a>
                        </div>
                    </article>
                </div>
            </div>
            
        </div>
    </div>
    <!-- 中部 end -->
    <!-- 底部 start -->
    <footer class="bottom-box">
        <div class="bottom-bg">
            <img src="img/bottomBg.png" alt="">
        </div>
        <div class="bottom-content">
            <div class="content-left">
                <!-- <img src="img/bottomImg.png" alt=""> -->
            </div>
            <div class="content-right">
                <div class="about-us">ABOUT US</div>
                <div class="us-info">
                    <span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                    
                    <span class="us-info-add">​XXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
                </div>
                <div class="us-more">
                    <a href="#" class="us-more-a">
                        <div>
                            READ MORE
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="bottom-copy">
            <div class="copy-css">© 2019 by Travel Sharer.</div>
        </div>
    </footer>
    <!-- 底部 end -->
</body>
<script>
    $('.detail-more-img').click(function() {
        $('.detail-article-share').toggle();
    });
</script>
</html>